<script setup>
import { computed } from "vue";
import { RouterLink } from "vue-router";
import ShopInfo from '@/components/shop/ShopInfo.vue'
import { useShopStore }  from "@/stores/shop.js";

const shopStore = useShopStore()
const nearbyList = computed(()=> shopStore.nearbyList)
</script>

<template>
  <!-- 附近店铺 -->
  <div class="nearby">
    <h3 class="nearby_title">附近店铺</h3>
    <RouterLink v-for="(item,index) in nearbyList" :key="index" :to="{name:'shop',query:{id:item.id}}">
      <ShopInfo :item="item"/>
    </RouterLink>
  </div>
</template>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
.nearby {
  &_title {
    margin: .16rem 0;
    font-size: .18rem;
    font-family: PingFangSC-Medium;
    font-weight: normal;
    line-height: .25rem;
    color: $content_fontcolor;
  }

  a {
    text-decoration: none;
  }
}
</style>